<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI dialog documentation</title>

<style>
body {
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana",
		"sans-serif"
}

.gutter {
	display: none;
}
</style>
</head>
<body>

	<script>{
		"title":
			"Dialog Widget",
		"excerpt":
			"Open content in an interactive overlay.",
		"termSlugs": {
			"category": [
				"widgets"
			]
		}
	}</script>
	<article id="dialog1" class="entry widget">
		<h2 class="section-title">
			<span>Dialog Widget</span><span class="version-details">version
				added: 1.0</span>
		</h2>
		<div class="entry-wrapper">
			<p class="desc">
				<strong>Description: </strong>Open content in an interactive
				overlay.
			</p>
			<section id="quick-nav">
				<header>
					<h2>
						QuickNav<a href="#entry-examples">Examples</a>
					</h2>
				</header>
				<div class="quick-nav-section">
					<h3>Options</h3>
					<div>
						<a href="#option-autoOpen">autoOpen</a>
					</div>
					<div>
						<a href="#option-buttons">buttons</a>
					</div>
					<div>
						<a href="#option-closeOnEscape">closeOnEscape</a>
					</div>
					<div>
						<a href="#option-closeText">closeText</a>
					</div>
					<div>
						<a href="#option-dialogClass">dialogClass</a>
					</div>
					<div>
						<a href="#option-draggable">draggable</a>
					</div>
					<div>
						<a href="#option-height">height</a>
					</div>
					<div>
						<a href="#option-hide">hide</a>
					</div>
					<div>
						<a href="#option-maxHeight">maxHeight</a>
					</div>
					<div>
						<a href="#option-maxWidth">maxWidth</a>
					</div>
					<div>
						<a href="#option-minHeight">minHeight</a>
					</div>
					<div>
						<a href="#option-minWidth">minWidth</a>
					</div>
					<div>
						<a href="#option-modal">modal</a>
					</div>
					<div>
						<a href="#option-position">position</a>
					</div>
					<div>
						<a href="#option-resizable">resizable</a>
					</div>
					<div>
						<a href="#option-show">show</a>
					</div>
					<div>
						<a href="#option-stack">stack</a>
					</div>
					<div>
						<a href="#option-title">title</a>
					</div>
					<div>
						<a href="#option-width">width</a>
					</div>
					<div>
						<a href="#option-zIndex">zIndex</a>
					</div>
				</div>
				<div class="quick-nav-section">
					<h3>Methods</h3>
					<div>
						<a href="#method-close">close</a>
					</div>
					<div>
						<a href="#method-destroy">destroy</a>
					</div>
					<div>
						<a href="#method-isOpen">isOpen</a>
					</div>
					<div>
						<a href="#method-moveToTop">moveToTop</a>
					</div>
					<div>
						<a href="#method-open">open</a>
					</div>
					<div>
						<a href="#method-option">option</a>
					</div>
					<div>
						<a href="#method-widget">widget</a>
					</div>
				</div>
				<div class="quick-nav-section">
					<h3>Events</h3>
					<div>
						<a href="#event-beforeClose">beforeClose</a>
					</div>
					<div>
						<a href="#event-create">create</a>
					</div>
					<div>
						<a href="#event-open">open</a>
					</div>
					<div>
						<a href="#event-focus">focus</a>
					</div>
					<div>
						<a href="#event-dragStart">dragStart</a>
					</div>
					<div>
						<a href="#event-drag">drag</a>
					</div>
					<div>
						<a href="#event-dragStop">dragStop</a>
					</div>
					<div>
						<a href="#event-resizeStart">resizeStart</a>
					</div>
					<div>
						<a href="#event-resize">resize</a>
					</div>
					<div>
						<a href="#event-resizeStop">resizeStop</a>
					</div>
					<div>
						<a href="#event-close">close</a>
					</div>
				</div>
			</section>
			<div class="longdesc" id="entry-longdesc">
				<p>A dialog is a floating window that contains a title bar and a
					content area. The dialog window can be moved, resized and closed
					with the 'x' icon by default.</p>

				<p>If the content length exceeds the maximum height, a scrollbar
					will automatically appear.</p>

				<p>A bottom button bar and semi-transparent modal overlay layer
					are common options that can be added.</p>

				<h3>Dependencies</h3>
				<ul>
					<li><a href="/category/ui-core/">UI Core</a></li>
					<li><a href="/jQuery.widget/">Widget Factory</a></li>
					<li><a href="/position/">Position</a></li>
					<li><a href="/button/">Button</a></li>
					<li><a href="/draggable/">Draggable</a> (optional; for use
						with the <a href="#option-draggable"><code>draggable</code></a>
						option)</li>
					<li><a href="/resizable/">Resizable</a> (optional; for use
						with the <a href="#option-resizable"><code>resizable</code></a>
						option)</li>
					<li><a href="/category/effects-core/">Effects Core</a>
						(optional; for use with the <a href="#option-show"><code>show</code></a>
						and <a href="#option-hide"><code>hide</code></a> options)</li>
				</ul>
			</div>
			<h3>Additional Notes:</h3>
			<div class="longdesc">
				<ul>
					<li>This widget requires some functional CSS, otherwise it
						won't work. If you build a custom theme, use the widget's specific
						CSS file as a starting point.</li>
				</ul>
			</div>
			<section id="options">
				<header>
					<h2 class="underline">Options</h2>
				</header>
				<div id="option-autoOpen" class="api-item first-item">
					<h3>
						autoOpen<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>true</code>
					</div>
					<div>
						If set to
						<code>true</code>
						, the dialog will automatically open upon initialization. If
						<code>false</code>
						, the dialog will stay hidden until the <a href="#method-open"><code>open()</code></a>
						method is called.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the autoOpen option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ autoOpen: <span
															class="literal">false</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the autoOpen option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> autoOpen = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"autoOpen"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"autoOpen"</span>, <span
															class="literal">false</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-buttons" class="api-item">
					<h3>
						buttons<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Object">Object</a> or <a
							href="http://api.jquery.com/Types#Array">Array</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>{}</code>
					</div>
					<div>Specifies which buttons should be displayed on the
						dialog. The context of the callback is the dialog element; if you
						need access to the button, it is available as the target of the
						event object.</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Object</strong>: The keys are the button labels
							and the values are the callbacks for when the associated button
							is clicked.</li>
						<li><strong>Array</strong>: Each element of the array must be
							an object defining the attributes, properties, and event handlers
							to set on the button.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the buttons option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ buttons: [ { text: <span
															class="string">"Ok"</span>, click: <span class="keyword">function</span>() { $( <span
															class="keyword">this</span> ).dialog( <span
															class="string">"close"</span> ); } ] });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the buttons option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> buttons = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"buttons"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"buttons"</span>, [ { text: <span
															class="string">"Ok"</span>, click: <span class="keyword">function</span>() { $( <span
															class="keyword">this</span> ).dialog( <span
															class="string">"close"</span> ); } ] );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-closeOnEscape" class="api-item">
					<h3>
						closeOnEscape<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>true</code>
					</div>
					<div>Specifies whether the dialog should close when it has
						focus and the user presses the esacpe (ESC) key.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the closeOnEscape option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ closeOnEscape: <span
															class="literal">false</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the closeOnEscape option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> closeOnEscape = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"closeOnEscape"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"closeOnEscape"</span>, <span
															class="literal">false</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-closeText" class="api-item">
					<h3>
						closeText<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"close"</code>
					</div>
					<div>Specifies the text for the close button. Note that the
						close text is visibly hidden when using a standard theme.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the closeText option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ closeText: <span
															class="string">"hide"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the closeText option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> closeText = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"closeText"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"closeText"</span>, <span
															class="string">"hide"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-dialogClass" class="api-item">
					<h3>
						dialogClass<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>""</code>
					</div>
					<div>The specified class name(s) will be added to the dialog,
						for additional theming.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the dialogClass option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ dialogClass: <span
															class="string">"alert"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the dialogClass option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> dialogClass = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"dialogClass"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"dialogClass"</span>, <span
															class="string">"alert"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-draggable" class="api-item">
					<h3>
						draggable<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>true</code>
					</div>
					<div>
						If set to
						<code>true</code>
						, the dialog will be draggable by the title bar. Requires the <a
							href="/draggable/">jQuery UI Draggable wiget</a> to be included.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the draggable option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ draggable: <span
															class="literal">false</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the draggable option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> draggable = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"draggable"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"draggable"</span>, <span
															class="literal">false</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-height" class="api-item">
					<h3>
						height<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a> or <a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"auto"</code>
					</div>
					<div>The height of the dialog.</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Number</strong>: The height in pixels.</li>
						<li><strong>String</strong>: The only supported string value
							is <code>"auto"</code> which will allow the dialog height to
							adjust based on its content.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the height option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ height: <span
															class="number">400</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the height option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> height = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"height"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"height"</span>, <span
															class="number">400</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-hide" class="api-item">
					<h3>
						hide<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a> or <a
							href="http://api.jquery.com/Types#String">String</a> or <a
							href="http://api.jquery.com/Types#Object">Object</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>If and how to animate the hiding of the dialog.</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Number</strong>: The dialog will fade out while
							animating the height and width for the specified duration.</li>
						<li><strong>String</strong>: The dialog will be hidden using
							the specified jQuery UI effect. See the <a
							href="/category/effects/">list of effects</a> for possible
							values.</li>
						<li><strong>Object</strong>: If the value is an object, then
							<code>effect</code>, <code>duration</code>, and <code>easing</code>
							properties may be provided. The <code>effect</code> property must
							be the name of a jQuery UI effect. When using a jQuery UI effect
							that supports additional settings, you may include those settings
							in the object and they will be passed to the effect. If <code>duration</code>
							or <code>easing</code> is omitted, then the default values will
							be used.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the hide option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ hide: <span
															class="string">"explode"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the hide option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> hide = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"hide"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"hide"</span>, <span
															class="string">"explode"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-maxHeight" class="api-item">
					<h3>
						maxHeight<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>The maximum height to which the dialog can be resized,
						in pixels.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the maxHeight option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ maxHeight: <span
															class="number">600</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the maxHeight option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> maxHeight = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"maxHeight"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"maxHeight"</span>, <span
															class="number">600</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-maxWidth" class="api-item">
					<h3>
						maxWidth<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>The maximum width to which the dialog can be resized, in
						pixels.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the maxWidth option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ maxWidth: <span
															class="number">600</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the maxWidth option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> maxWidth = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"maxWidth"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"maxWidth"</span>, <span
															class="number">600</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-minHeight" class="api-item">
					<h3>
						minHeight<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>150</code>
					</div>
					<div>The minimum height to which the dialog can be resized,
						in pixels.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the minHeight option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ minHeight: <span
															class="number">200</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the minHeight option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> minHeight = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"minHeight"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"minHeight"</span>, <span
															class="number">200</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-minWidth" class="api-item">
					<h3>
						minWidth<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>150</code>
					</div>
					<div>The minimum width to which the dialog can be resized, in
						pixels.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the minWidth option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ minWidth: <span
															class="number">200</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the minWidth option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> minWidth = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"minWidth"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"minWidth"</span>, <span
															class="number">200</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-modal" class="api-item">
					<h3>
						modal<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						If set to
						<code>true</code>
						, the dialog will have modal behavior; other items on the page
						will be disabled, i.e., cannot be interacted with. Modal dialogs
						create an overlay below the dialog but above other page elements.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the modal option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ modal: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the modal option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> modal = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"modal"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"modal"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-position" class="api-item">
					<h3>
						position<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Object">Object</a> or <a
							href="http://api.jquery.com/Types#String">String</a> or <a
							href="http://api.jquery.com/Types#Array">Array</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>{ my: "center", at: "center", of: window }</code>
					</div>
					<div>Specifies where the dialog should be displayed. The
						dialog will handle collisions such that as much of the dialog is
						visible as possible.</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Object</strong>: Identifies the position of the
							dialog when opened. The <code>of</code> option defaults to the
							window, but you can specify another element to position against.
							You can refer to the <a href="/position">jQuery UI Position</a>
							utility for more details about the various options.</li>
						<li><strong>String</strong>: A string representing the
							position within the viewport. Possible values: <code>"center"</code>,
							<code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"bottom"</code>.</li>
						<li><strong>Array</strong>: An array containing an <em>x,
								y</em> coordinate pair in pixel offset from the top left corner of
							the viewport or the name of a possible string value.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the position option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ position: { my: <span
															class="string">"left top"</span>, at: <span
															class="string">"left bottom"</span>, of: button } });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the position option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> position = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"position"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"position"</span>, { my: <span
															class="string">"left top"</span>, at: <span
															class="string">"left bottom"</span>, of: button } );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-resizable" class="api-item">
					<h3>
						resizable<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>true</code>
					</div>
					<div>
						If set to
						<code>true</code>
						, the dialog will be resizable. Requires the <a href="/resizable/">jQuery
							UI Resizable widget</a> to be included.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the resizable option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ resizable: <span
															class="literal">false</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the resizable option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> resizable = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"resizable"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"resizable"</span>, <span
															class="literal">false</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-show" class="api-item">
					<h3>
						show<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a> or <a
							href="http://api.jquery.com/Types#String">String</a> or <a
							href="http://api.jquery.com/Types#Object">Object</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>If and how to animate the showing of the dialog.</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Number</strong>: The dialog will fade in while
							animating the height and width for the specified duration.</li>
						<li><strong>String</strong>: The dialog will be shown using
							the specified jQuery UI effect. See the <a
							href="/category/effects/">list of effects</a> for possible
							values.</li>
						<li><strong>Object</strong>: If the value is an object, then
							<code>effect</code>, <code>duration</code>, and <code>easing</code>
							properties may be provided. The <code>effect</code> property must
							be the name of a jQuery UI effect. When using a jQuery UI effect
							that supports additional settings, you may include those settings
							in the object and they will be passed to the effect. If <code>duration</code>
							or <code>easing</code> is omitted, then the default values will
							be used.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the show option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ show: <span
															class="string">"slow"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the show option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> show = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"show"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"show"</span>, <span
															class="string">"slow"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-stack" class="api-item">
					<h3>
						stack<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>true</code>
					</div>
					<div>Specifies whether the dialog will stack on top of other
						dialogs. This will cause the dialog to move to the front of other
						dialogs when it gains focus.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the stack option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ stack: <span
															class="literal">false</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the stack option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> stack = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"stack"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"stack"</span>, <span
															class="literal">false</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-title" class="api-item">
					<h3>
						title<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>""</code>
					</div>
					<div>
						Specifies the title of the dialog. Any valid HTML may be set as
						the title. The title can also be specified by the
						<code>title</code>
						attribute on the dialog source element.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the title option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ title: <span
															class="string">"Dialog Title"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the title option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> title = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"title"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"title"</span>, <span
															class="string">"Dialog Title"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-width" class="api-item">
					<h3>
						width<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>300</code>
					</div>
					<div>The width of the dialog, in pixels.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the width option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ width: <span
															class="number">500</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the width option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> width = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"width"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"width"</span>, <span
															class="number">500</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-zIndex" class="api-item">
					<h3>
						zIndex<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Integer">Integer</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>1000</code>
					</div>
					<div>The starting z-index for the dialog.</div>
					<strong>Code examples:</strong>
					<p>Initialize the dialog with the zIndex option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog({ zIndex: <span
															class="number">20</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the zIndex option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> zIndex = $( <span
															class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"zIndex"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).dialog( <span
															class="string">"option"</span>, <span class="string">"zIndex"</span>, <span
															class="number">20</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
			</section>
			<section id="methods">
				<header>
					<h2 class="underline">Methods</h2>
				</header>
				<div id="method-close">
					<div class="api-item first-item">
						<h3>close()</h3>
						<div>Closes the dialog.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the close method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).dialog( <span
																	class="string">"close"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-destroy">
					<div class="api-item">
						<h3>destroy()</h3>
						<div>Removes the dialog functionality completely. This will
							return the element back to its pre-init state.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the destroy method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).dialog( <span
																	class="string">"destroy"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-isOpen">
					<div class="api-item">
						<h3>
							isOpen()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
						</h3>
						<div>Whether the dialog is currently open.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the isOpen method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> isOpen = $( <span
																	class="string">".selector"</span> ).dialog( <span
																	class="string">"isOpen"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-moveToTop">
					<div class="api-item">
						<h3>moveToTop()</h3>
						<div>Moves the dialog to the top of the dialog stack.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the moveToTop method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).dialog( <span
																	class="string">"moveToTop"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-open">
					<div class="api-item">
						<h3>open()</h3>
						<div>Opens the dialog.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the open method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).dialog( <span
																	class="string">"open"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-option">
					<div class="api-item">
						<h3>
							option( optionName )<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Object">Object</a></span>
						</h3>
						<div>
							Gets the value currently associated with the specified
							<code>optionName</code>
							.
						</div>
						<ul>
							<li>
								<div>
									<strong>optionName</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
								</div>
								<div>The name of the option to get.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> isDisabled = $( <span
																	class="string">".selector"</span> ).dialog( <span
																	class="string">"option"</span>, <span class="string">"disabled"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>
							option()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
						</h3>
						<div>Gets an object containing key/value pairs representing
							the current dialog options hash.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> options = $( <span
																	class="string">".selector"</span> ).dialog( <span
																	class="string">"option"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>option( optionName, value )</h3>
						<div>
							Sets the value of the dialog option associated with the specified
							<code>optionName</code>
							.
						</div>
						<ul>
							<li>
								<div>
									<strong>optionName</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
								</div>
								<div>The name of the option to set.</div>
							</li>
							<li>
								<div>
									<strong>value</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Object">Object</a>
								</div>
								<div>A value to set for the option.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).dialog( <span
																	class="string">"option"</span>, <span class="string">"disabled"</span>, <span
																	class="literal">true</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>option( options )</h3>
						<div>Sets one or more options for the dialog.</div>
						<ul>
							<li>
								<div>
									<strong>options</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Object">Object</a>
								</div>
								<div>A map of option-value pairs to set.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).dialog( <span
																	class="string">"option"</span>, { disabled: <span
																	class="literal">true</span> } );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-widget">
					<div class="api-item">
						<h3>
							widget()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
						</h3>
						<div>
							Returns a
							<code>jQuery</code>
							object containing the generated wrapper.
						</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the widget method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> widget = $( <span
																	class="string">".selector"</span> ).dialog( <span
																	class="string">"widget"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
			</section>
			<section id="events">
				<header>
					<h2 class="underline">Events</h2>
				</header>
				<div id="event-beforeClose" class="api-item first-item">
					<h3>
						beforeClose( event, ui )<span class="returns">Type: <code>dialogbeforeclose</code></span>
					</h3>
					<div>Triggered when a dialog is about to close. If canceled,
						the dialog will not close.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the beforeClose callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  beforeClose: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogbeforeclose event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogbeforeclose"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-close" class="api-item">
					<h3>
						close( event, ui )<span class="returns">Type: <code>dialogclose</code></span>
					</h3>
					<div>Triggered when the dialog is closed.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the close callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  close: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogclose event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogclose"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-create" class="api-item">
					<h3>
						create( event, ui )<span class="returns">Type: <code>dialogcreate</code></span>
					</h3>
					<div>Triggered when the dialog is created.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the create callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  create: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogcreate event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogcreate"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-drag" class="api-item">
					<h3>
						drag( event, ui )<span class="returns">Type: <code>dialogdrag</code></span>
					</h3>
					<div>Triggered while the dialog is being dragged.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>position</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current CSS position of the dialog.</div>
								</li>
								<li>
									<div>
										<strong>offset</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current offset position of the dialog.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the drag callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  drag: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogdrag event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogdrag"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-dragStart" class="api-item">
					<h3>
						dragStart( event, ui )<span class="returns">Type: <code>dialogdragstart</code></span>
					</h3>
					<div>Triggered when the user starts dragging the dialog.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>position</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current CSS position of the dialog.</div>
								</li>
								<li>
									<div>
										<strong>offset</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current offset position of the dialog.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the dragStart callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  dragStart: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogdragstart event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogdragstart"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-dragStop" class="api-item">
					<h3>
						dragStop( event, ui )<span class="returns">Type: <code>dialogdragstop</code></span>
					</h3>
					<div>Triggered after the dialog has been dragged.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>position</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current CSS position of the dialog.</div>
								</li>
								<li>
									<div>
										<strong>offset</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current offset position of the dialog.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the dragStop callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  dragStop: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogdragstop event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogdragstop"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-focus" class="api-item">
					<h3>
						focus( event, ui )<span class="returns">Type: <code>dialogfocus</code></span>
					</h3>
					<div>Triggered when the dialog gains focus.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the focus callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  focus: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogfocus event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogfocus"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-open" class="api-item">
					<h3>
						open( event, ui )<span class="returns">Type: <code>dialogopen</code></span>
					</h3>
					<div>Triggered when the dialog is opened.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the open callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  open: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogopen event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogopen"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-resize" class="api-item">
					<h3>
						resize( event, ui )<span class="returns">Type: <code>dialogresize</code></span>
					</h3>
					<div>Triggered while the dialog is being resized.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>orginalPosition</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The CSS position of the dialog prior to being
										resized.</div>
								</li>
								<li>
									<div>
										<strong>position</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current CSS position of the dialog.</div>
								</li>
								<li>
									<div>
										<strong>originalSize</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The size of the dialog prior to being resized.</div>
								</li>
								<li>
									<div>
										<strong>size</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current size of the dialog.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the resize callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  resize: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogresize event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogresize"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-resizeStart" class="api-item">
					<h3>
						resizeStart( event, ui )<span class="returns">Type: <code>dialogresizestart</code></span>
					</h3>
					<div>Triggered when the user starts resizing the dialog.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>orginalPosition</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The CSS position of the dialog prior to being
										resized.</div>
								</li>
								<li>
									<div>
										<strong>position</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current CSS position of the dialog.</div>
								</li>
								<li>
									<div>
										<strong>originalSize</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The size of the dialog prior to being resized.</div>
								</li>
								<li>
									<div>
										<strong>size</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current size of the dialog.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the resizeStart callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  resizeStart: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogresizestart event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogresizestart"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-resizeStop" class="api-item">
					<h3>
						resizeStop( event, ui )<span class="returns">Type: <code>dialogresizestop</code></span>
					</h3>
					<div>Triggered after the dialog has been resized.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>orginalPosition</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The CSS position of the dialog prior to being
										resized.</div>
								</li>
								<li>
									<div>
										<strong>position</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current CSS position of the dialog.</div>
								</li>
								<li>
									<div>
										<strong>originalSize</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The size of the dialog prior to being resized.</div>
								</li>
								<li>
									<div>
										<strong>size</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Object">Object</a>
									</div>
									<div>The current size of the dialog.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the dialog with the resizeStop callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).dialog({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  resizeStop: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the dialogresizestop event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"dialogresizestop"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
			</section>
			<section class="entry-examples" id="entry-examples">
				<header>
					<h2 class="underline">Example:</h2>
				</header>
				<div class="entry-example" id="example-0">
					<h4>
						<span class="desc">A simple jQuery UI Dialog</span>
					</h4>
					<div class="syntaxhighlighter xml ">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

										<div class="line n6">6</div>

										<div class="line n7">7</div>

										<div class="line n8">8</div>

										<div class="line n9">9</div>

										<div class="line n10">10</div>

										<div class="line n11">11</div>

										<div class="line n12">12</div>

										<div class="line n13">13</div>

										<div class="line n14">14</div>

										<div class="line n15">15</div>

										<div class="line n16">16</div>

										<div class="line n17">17</div>

										<div class="line n18">18</div>

										<div class="line n19">19</div>

										<div class="line n20">20</div>

										<div class="line n21">21</div>

										<div class="line n22">22</div>

										<div class="line n23">23</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="doctype">&lt;!doctype html&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">html</span> <span
															class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">head</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">meta</span> <span class="attribute">charset</span>=<span
															class="value">"utf-8"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">title</span>&gt;</span>dialog demo<span
															class="tag">&lt;/<span class="title">title</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">link</span> <span class="attribute">rel</span>=<span
															class="value">"stylesheet"</span> <span class="attribute">href</span>=<span
															class="value">"http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">script</span> <span class="attribute">src</span>=<span
															class="value">"http://code.jquery.com/jquery-1.8.3.js"</span>&gt;</span><span
															class="javascript"></span><span class="tag">&lt;/<span
															class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">script</span> <span class="attribute">src</span>=<span
															class="value">"http://code.jquery.com/ui/1.9.2/jquery-ui.js"</span>&gt;</span><span
															class="javascript"></span><span class="tag">&lt;/<span
															class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">head</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">body</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">button</span> <span
															class="attribute">id</span>=<span class="value">"opener"</span>&gt;</span>open the dialog<span
															class="tag">&lt;/<span class="title">button</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">div</span> <span
															class="attribute">id</span>=<span class="value">"dialog"</span> <span
															class="attribute">title</span>=<span class="value">"Dialog Title"</span>&gt;</span>I'm a dialog<span
															class="tag">&lt;/<span class="title">div</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">script</span>&gt;</span><span
															class="javascript"></span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">"#dialog"</span> ).dialog({ autoOpen: <span
															class="literal">false</span> });</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">"#opener"</span> ).click(<span
															class="keyword">function</span>() {</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  $( <span class="string">"#dialog"</span> ).dialog( <span
															class="string">"open"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>});</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">body</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">html</span>&gt;</span>
													</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<h4>Demo:</h4>
					<div class="demo code-demo"></div>
				</div>
			</section>
		</div>
	</article>

</body>
</html>
